import { getCssVariableValue } from '@/utils/utils';

// 基础图表
export const baseChart = (option) => {
  const base = {
    grid: { top: 24, left: 48, bottom: 72, right: 10 },
    tooltip: {},
    legend: {},
    xAxis: [
      {
        type: 'category',
        formatter: (v) => v.split(' ')[1],
        axisLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisTick: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-x-line'),
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        splitLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-y-line'),
          },
        },
      },
    ],
    dataZoom: {
      type: 'slider',
      start: 0,
      end: 100,
      left: 40,
      right: 10,
      bottom: 20,
      height: 20,
      show: true,
      backgroundColor: getCssVariableValue('--bg-form'),
      dataBackground: {
        dataBackground: {
          areaStyle: { opacity: 0 },
          lineStyle: { opacity: 0 },
        },
      },
      selectedDataBackground: {
        areaStyle: {
          color: getCssVariableValue('--font-primary'),
          opacity: 0.15,
        },
        lineStyle: { color: 'transparent' },
      },
      borderColor: 'transparent',
      handleStyle: {
        color: getCssVariableValue('--bg-form'),
        borderColor: getCssVariableValue('--bd'),
      },
      brushSelect: false,
      showDetail: false,
    },
  };
  return {
    ...base,
    ...option,
  };
};

// 散点图（前/后）
export const scatterChart = (dataSource) => {
  const removeRepeat = (arr) => {
    const obj = {};
    return arr.filter((item) => {
      const str = item.toString();
      if (!obj[str]) {
        obj[str] = true;
        return item;
      }
      return false;
    });
  };
  if (!dataSource || !dataSource.before || !dataSource.after) return null;
  const { before = [], after = [] } = dataSource;
  let dayAhead = before.map(({ x, y }) => [x, y]);
  dayAhead = removeRepeat(dayAhead);
  let realtime = after.map(({ x, y }) => [x, y]);
  realtime = removeRepeat(realtime);

  const tooltipDiy = (params) => {
    return params
      .map((x) => {
        const typename = x.seriesIndex === 0 ? '实时' : '日前';
        return `<div style="display:flex;align-items:center;">
                  <div>
                    <div style="display:flex;align-items:center;">
                      <div style="width:8px;height:8px;border-radius:4px;background:${
                        x.color
                      };"></div>
                      <div style="color:#A7A8A9;margin:0 4px;">${typename}现货出清价格</div>
                    </div>
                    <div style="display:flex;align-items:center;">
                      <div style="width:8px;height:8px;border-radius:4px;background:${
                        x.color
                      };"></div>
                      <div style="color:#A7A8A9;margin:0 4px;">${typename}竞价空间</div>
                    </div>
                  </div>
                  <div style="color:#A7A8A9;text-align:right;">
                    <div>${x.value?.[1] || '-'}</div>
                    <div>${x.value?.[0] || '-'}</div>
                  </div>
                </div>`;
      })
      .join('');
  };

  return {
    grid: { top: 12, left: 48, bottom: 75, right: 10 },
    tooltip: {},
    legend: {},
    xAxis: [
      {
        scale: true,
        axisLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisTick: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-x-line'),
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        splitLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-y-line'),
          },
        },
      },
    ],
    dataZoom: {
      type: 'slider',
      start: 0,
      end: 100,
      left: 40,
      right: 10,
      bottom: 20,
      height: 20,
      show: true,
      backgroundColor: getCssVariableValue('--bg-form'),
      dataBackground: {
        dataBackground: {
          areaStyle: { opacity: 0 },
          lineStyle: { opacity: 0 },
        },
      },
      selectedDataBackground: {
        areaStyle: {
          color: getCssVariableValue('--font-primary'),
          opacity: 0.15,
        },
        lineStyle: { color: 'transparent' },
      },
      borderColor: 'transparent',
      handleStyle: {
        color: getCssVariableValue('--bg-form'),
        borderColor: getCssVariableValue('--bd'),
      },
      brushSelect: false,
      showDetail: false,
    },
    tooltip: {
      formatter: tooltipDiy,
    },
    series: [
      {
        type: 'scatter',
        name: '实时竞价空间-价格相关性',
        data: realtime,
        props: {
          symbolSize: 8,
          legendHoverLink: false,
          itemStyle: { color: '#E86452', borderWidth: 1, borderColor: 'rgba(34, 38, 41, 0.5)' },
          emphasis: { itemStyle: { borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.85)' } },
        },
      },
      {
        type: 'scatter',
        name: '日前竞价空间-价格相关性',
        data: dayAhead,
        props: {
          symbolSize: 8,
          legendHoverLink: false,
          itemStyle: { color: '#5E92F6', borderWidth: 1, borderColor: 'rgba(34, 38, 41, 0.5)' },
          emphasis: { itemStyle: { borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.85)' } },
        },
      },
    ],
  };
};
